<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<!-- 	xmlns:c="http://java.sun.com/jstl/core"xmlns:fmt="http://java.sun.com/jsp/jstl/fmt" -->
<h:head>
	<link href="../css/style2.css" rel="stylesheet" type="text/css" />
	<title class="title">Create Question</title>
</h:head>
<h:body>
	<h:form styleClass="frm">
		<table class="tbl">
			<tr>
				<th><h1>Create Exam Question</h1></th>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td><h:selectBooleanCheckbox title="Mix Question" value="#{createExamQuestionBean.mixQuestion}"> <h:outputText value="Mix Question"/>
								 <f:ajax render="showExamContent" execute="showExamContent"  listener="#{createExamQuestionBean.mixQuestions}"></f:ajax></h:selectBooleanCheckbox></td>
								
							<td><h:commandButton value="Available EQ" /></td>
							<td><h:commandButton value="Add Question" /></td>
							<td><h:commandButton value="Show Answer" /></td>
						</tr>
						<tr>
							<td><h:selectBooleanCheckbox title="Mix Answer" value="#{createExamQuestionBean.mixChoice}"> <h:outputText value="Mix Answer..."/>
								<f:ajax render="showExamContent" execute="showExamContent"  listener="#{createExamQuestionBean.mixChoices}"></f:ajax></h:selectBooleanCheckbox> 
							</td>
							<td><h:commandButton value="Save to file   " /></td>
							<td><h:commandButton value="Save EQ      "  action="#{createExamQuestionBean.saveExamQuestion}"/></td>
							<td><h:commandButton value="Update EQ    " /></td>
						</tr>
						<tr>
							<td>
							<h:selectBooleanCheckbox value="#{createExamQuestionBean.examQuestionVO.active}"/> 
							<h:outputText value="IsActive"/>
							</td>
							<td>
							<div><h:outputText value="Exam Question Name :"/></div>
							<div><h:inputText value="#{createExamQuestionBean.examQuestionVO.name}"/></div>
							</td>
							<td>
							<div><h:outputText value="Time line :"/></div>
							<div><h:inputText title="minutes" value="#{createExamQuestionBean.examQuestionVO.timeLine}"/></div>
							</td>
							<td>
							<div><h:outputText value="Description :"/></div>
							<div><h:inputText value="#{createExamQuestionBean.examQuestionVO.description}"/></div>
							</td>
							<td  align="right">
							<div><h:outputText value="."/></div>
							<div align="right">
							<h:selectOneMenu
									value="#{createExamQuestionBean.course}" id="course">
									<f:selectItems value="#{createExamQuestionBean.listCourse}" />
								</h:selectOneMenu> <h:selectOneMenu
									value="#{createExamQuestionBean.groupQuestion}" id="group">
									<f:selectItems
										value="#{createExamQuestionBean.listQuestionGroup}" />
								</h:selectOneMenu> <h:selectOneMenu
									value="#{createExamQuestionBean.kindOfQuestion}" id="kind">
									<f:selectItems
										value="#{createExamQuestionBean.listKindQuestion}" />
								</h:selectOneMenu> <h:selectOneMenu value="#{createExamQuestionBean.level}"
									id="level">
									<f:selectItems value="#{createExamQuestionBean.listLevel}" />
								</h:selectOneMenu> <h:commandButton value="Search" id="searchButton">
									<f:ajax render="showListQuestion"
										execute="course group kind level"
										listener="#{createExamQuestionBean.loadQuestion}" />
								</h:commandButton>
								</div>
								</td>
						</tr>
					</table>
				</td>
				
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td>
								<!-- Load Content Exam Question -->
								<div
									style="border: solid 2px #ff0000; background: #90EE90; color: #ffeee; padding: 4px; width: 800px; height: 500px; overflow: auto;">
									<div id="content_right_2">
										<h:dataTable id="showExamContent"
											value="#{createExamQuestionBean.paginator.model}"
											var="question" bgcolor="#F1F1F1" border="10" cellpadding="5" 
											cellspacing="3" first="0" width="800px" dir="LTR"
											frame="hsides" rules="all"
											summary="This is a JSF code to create dataTable.">
											<!-- load cac cau hoi tu question bean -->
											<h:column>
												<f:facet name="header">
													<h:outputText value="Question Content" />
												</f:facet>
												<div class="que multichoice clearfix">
													<h:panelGrid columns="2">
														<h:outputText value="#{question.order},"
															styleClass="firstletter"></h:outputText>

														<h:outputText value="#{question.contentQuestion}"></h:outputText>
														<h:outputText value="Điểm #{question.score}"></h:outputText>
													</h:panelGrid>


													<div class="ablock clearfix">
														<h:panelGrid columns="3">
															<h:outputText value="Đáp án :"></h:outputText>
															<h:selectManyCheckbox value="#{question.listChoiced}"
																rendered="#{question.kindOfQuestion == 'MultiChoice' and question.multiChoice}"
																layout="pageDirection">
																<f:selectItems value="#{question.listSelectChoice}"></f:selectItems>
															</h:selectManyCheckbox>
															<h:selectOneRadio value="#{question.choiced}"
																rendered="#{question.kindOfQuestion == 'MultiChoice' and !question.multiChoice}"
																layout="pageDirection">
																<f:selectItems value="#{question.listSelectChoice}"></f:selectItems>
															</h:selectOneRadio>
															<h:selectOneRadio value="#{question.trueFalseChoiced}"
																rendered="#{question.kindOfQuestion == 'TrueFalseQuestion'}"
																layout="pageDirection">
																<f:selectItem itemValue="1" itemLabel="A. Đúng"></f:selectItem>
																<f:selectItem itemValue="2" itemLabel="B. Sai"></f:selectItem>
															</h:selectOneRadio>

															<h:panelGroup>
																<h:graphicImage value="#{question.imageName}"
																	rendered="#{question.imageName !=''}" />
															</h:panelGroup>
														</h:panelGrid>
													</div>
												</div>
											</h:column>
											<h:column>
											<f:facet name="header">
												<h:outputText value="Remove" />
											</f:facet>
											<h:selectBooleanCheckbox value="#{question.checkStatus}" />
											</h:column>
										</h:dataTable>
										<div align="right">
											<h:panelGroup id="paging">
											<h:commandButton value="&lt; prev">
											<f:ajax render="showExamContent showListQuestion page" execute="showExamContent" listener="#{createExamQuestionBean.paginator.prev}"></f:ajax></h:commandButton>
											<h:outputText
												value="#{createExamQuestionBean.paginator.pageIndex} / #{createExamQuestionBean.paginator.pages}" id="page"/>
											<h:commandButton value="next &gt;">
												<f:ajax render="showExamContent showListQuestion page" execute="showExamContent" listener="#{createExamQuestionBean.paginator.next}"></f:ajax></h:commandButton>
											<h:inputHidden
												value="#{createExamQuestionBean.paginator.pageIndex}" id="pageIndex"/>
										</h:panelGroup>
										</div>
									</div>

									<div id="content_right_3"></div>
								</div>
								<div align="center" style="border: solid 2px #ff0000; background: #4096EE; color: #fefe; padding: 4px;  overflow: auto;"><h:commandButton value="Remove Question">
									<f:ajax render="showExamContent showListQuestion paging"
										execute="showExamContent"
										listener="#{createExamQuestionBean.removeQuestion}" />
								</h:commandButton></div> 
							</td>
							
							<td>
								<!-- Load All Exam Question -->
								<div
									style="border: solid 2px #ff0000; background: #7FFFD4; color: #ffeee; padding: 4px; width: 300px; height: 500px; overflow: auto;" align="right">
									<h:dataTable id="showListQuestion"
										value="#{createExamQuestionBean.listQuestion}" var="question"
										bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3"
										first="0" width="300" dir="LTR" frame="hsides" rules="all"
										summary="This is a JSF code to create dataTable.">

										<h:column>
											<f:facet name="header">
												<h:outputText value="Question" />
											</f:facet>
											<h:link hreflang="#">
												<h:outputText value="#{question.order}"></h:outputText>
											</h:link>
										</h:column>
										<h:column>
											<f:facet name="header">
												<h:outputText value="Question Content" />
											</f:facet>
											<h:link>
												<h:outputText value="#{question.describle}"></h:outputText>
											</h:link>
										</h:column>

										<h:column>
											<f:facet name="header">
												<h:outputText value="Add" />
											</f:facet>
											<h:selectBooleanCheckbox value="#{question.checkStatus}" />
										</h:column>
									</h:dataTable>
								</div> 
								<div align="center" style="border: solid 2px #ff0000; background: #4096EE; color: #fefe; padding: 4px;  overflow: auto;">
								<h:commandButton value="Add Question">
									<f:ajax render="showExamContent showListQuestion paging"
										execute="showListQuestion"
										listener="#{createExamQuestionBean.addQuestion}" />
								</h:commandButton></div>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
		</table>
	</h:form>
</h:body>
</html>